<template>
    <ul>
        <li v-for="item in menuData" :key="item.id">
            {{ item.title }}
            <ChildMenu :data="item.children" />
        </li>
    </ul>
</template>

<script setup>
import { ref } from 'vue';
import ChildMenu from './ChildMenu.vue'

const menuData = ref([
    {
        id: '1',
        title: '首页'
    },
    {
        id: '2',
        title: '电影管理',
        children: [
            { id: '2-1', title: '电影列表' },
            { id: '2-2', title: '电影分类' },
        ]
    },
    {
        id: '3',
        title: '影院管理',
        children: [
            { id: '3-1', title: '影院列表' },
            { id: '3-2', title: '影院区域' },
            {
                id: '3-3', title: '影院品牌',
                children: [
                    { id: '3-3-1', title: '品牌列表' },
                    {
                        id: '3-3-2', title: '品牌新增',
                        children: [{
                            id: '3-3-2-1', title: "四级菜单"
                        }]
                    },
                ]
            },
        ]
    }
])

</script>

<style scoped></style>